<template> 
    <div>
        <div class="input">
            <input type="text" ref="searchText" id="searchText" v-model="address">
        </div>
        <div id="container"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: 'map',
    data() {
        return {
            map:null,
            AMap:null,
            address:'',
        };
    },
    created() {
       this.initData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        initData(){
            window._AMapSecurityConfig = {
                securityJsCode:'9e7d41e929a7971370624bb274e05f46',
            }
            var that = this;
            AMapLoader.load({
                key:"40e239b86aa35f64d74cf97e27ef7358",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins:['AMap.AutoComplete','AMap.PlaceSearch','AMap.OverView'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                that.map = new AMap.Map("container",{  //设置地图容器id
                    viewMode:"2D",    //是否为3D地图模式
                    zoom:5,           //初始化地图级别
                    center:[103.602725,30.076636], //初始化地图中心点位置
                });
                this.initAMap(AMap);
            }).catch(e=>{
                console.log(e);
            })

        },
        initAMap(AMap){
            this.AMap = AMap;
            var that = this;
            AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'],function(){
              var autoOptions = {
                // 城市，默认全国 
                city: "武汉",
                // 使用联想输入的input的id
                input: "searchText"
              }
              var autocomplete= new AMap.AutoComplete(autoOptions)

              var placeSearch = new AMap.PlaceSearch({
                city:'北京',
                map:that.map
              })
              autocomplete.on('select', function(e){
                //TODO 针对选中的poi实现自己的功能
                console.log(e);
                placeSearch.search(e.poi.name)
              })
             })
             

             // 同时引入工具条插件，比例尺插件和鹰眼插件
            AMap.plugin([
                'AMap.ToolBar',
                'AMap.Scale',
                'AMap.MapType',
                'AMap.Geolocation',
            ], function(){
                // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                that.map.addControl(new AMap.ToolBar());

                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                that.map.addControl(new AMap.Scale());

                // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                that.map.addControl(new AMap.MapType());

                // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                that.map.addControl(new AMap.Geolocation());
                
            });

        },
        
        
    }
};
</script>

<style scoped>
 #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
.input{
    position:absolute;
    z-index: 55;
}
</style>
